<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet"  type="text/css"  href="http://www.bootcss.com/p/buttons/css/buttons.css"/>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
    var ws = new WebSocket("ws://192.168.3.101:8090/mySpring/webSocket");
    /*
     *监听三种状态的变化 。js会回调
     */
    ws.onopen = function(message) {

    };
    ws.onclose = function(message) {

    };
    ws.onmessage = function(message) {
        showMessage(message.data);
    };
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function() {
        ws.close();
    };
    //关闭连接
    function closeWebSocket() {
        ws.close();
    }
    //发送消息
    function send() {
        var input = document.getElementById("msg");
        var text = input.value;
        if(text==''){
        	alert(" ~_~ 不能发空的啊   ~_~");
        	$("#msg").focus();
        	return;
        }
        ws.send(text);
        input.value = "";
        $("#msg").focus();

    }
    function showMessage(message) {
    	var time=getNowFormatDate();
    	var div = document.getElementById("showChatMessage");
    	if(message.indexOf("访")>0){
    		 var text1 = document.createTextNode(message);
    		 var br = document.createElement("br")
             div.appendChild(text1);
    		 div.appendChild(br);
    	}else{
    		var array=message.split("：");
            var person=array[0];
            var context=array[1];
            var ep1 = document.createElement("span");
            ep1.id = "ep1";
            var text1 = document.createTextNode(person+"      "+time);
            ep1.appendChild(text1);
            var ep2 = document.createElement("span");
            ep2.id = "ep2";
            var text2 = document.createTextNode(context);
            ep2.appendChild(text2);
            var br = document.createElement("br")
            var br2 = document.createElement("br")
            div.appendChild(ep1);
            div.appendChild(br);
            div.appendChild(ep2);
            div.appendChild(br2);
    
    	}
    	 var height=div.scrollHeight;
         div.scrollTop =height;
    }
    
    function getNowFormatDate() {
	    var date = new Date();
	    var seperator1 = "-";
	    var seperator2 = ":";
	    var month = date.getMonth() + 1;
	    var strDate = date.getDate();
	    if (month >= 1 && month <= 9) {
	        month = "0" + month;
	    }
	    if (strDate >= 0 && strDate <= 9) {
	        strDate = "0" + strDate;
	    }
	    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
	            + " " + date.getHours() + seperator2 + date.getMinutes()
	            + seperator2 + date.getSeconds();
	    return currentdate;
	}
</script>
<style>
#show{
width: 420px; 
height: 370px; 
border: 1px solid #eee;
margin-left:20%;
margin-top:5%;
padding-bottom:2%;
padding-left:2%;
padding-top:2%;
}
#msg{
border-top:none;
outline:medium;
border-left:none;
border-right:none;
border-bottom:2px solid #0066CC;
}

#showChatMessage{
 padding:0px 10px;
 color:	#666666;
 font-size:14px;
 height: 250px; 
 width: 350px; 
 border:1px solid #eee;
 word-wrap: break-word;
 overflow-y:auto;
}
.button{
 padding:0 10px;
 height:30px;
}
#ep1{
color:blue;
}
#ep2{
color:#000000;
}
</style>
</head>
<body>

    <div id="show">
        <div id="showChatMessage"></div>
        </br>
        <div id="writ">
        <input type="text" size="50" id="msg" name="msg" placeholder="PLASE  BEGIN   SHOW" />
        </div>
        </br>
        <div id="send">
        <a href="javascript:void(0)"  onclick="send()" class="button button-3d button-royal">Say Hi</a>
        </div>
    </div>
</body>
</html>